Creating
Continuous
Movement - Page II
by
kirupa chinnathambi
Let us continue what we began in the
first page, shall we? First, let me paste the entire chunk code in here for easy
viewing:
onClipEvent (enterFrame)
{
//generating movement
location = this._x;
var i;
i = 1+_root._xmouse/5;
if (this,
hitTest(_root.block))
{
this._x
= -1000;
} else {
this._x
= location+i++;
}
//clips are scaled according to
y-mouse;
this._xscale = 40+_root._ymouse;
this._yscale = 40+_root._ymouse;
}
In the next few sections, I will take each
line (section) of code and explain the rationale behind it. Most of it
will be mundane material you may already know, but some of
the explanation might be new. If you want, you may simply
skip ahead to the lines where you may have questions on.
onClipEvent (enterFrame)
{
The above line signifies one of the most
common code-openers for a movie clip. The statement is known
as an On event handler because "on" an event, something
should happen. In this case, on the event of entering the
frame, the code found below the on would be executed. Unlike
other events, enterFrame continuously executes the code
under it without requiring some preconditioned statement or
user action.
location =
this._x;
I am assigning a value
this._x to
the variable location. Notice that I did not declare (forgot
is the more proper word) the variable location before use.
No worry! Unlike other programming languages, ActionScript
is not very picky on details like this.
The words this._x
refer the the X position value of the current movie clip.
The statement this
takes the place of a conventional movie clip instance name.
Because our movie clip is actually a circle that will get
copied and pasted numerous times, singling one name would
have proven impractical for this animation. An example would
be to call a group of kids "children" instead of calling
each one by name. Similar to how a child knows to respond to
"children", the movie clip knows to respond when it sees
"this".
To sum it all, the variable location gets the
current X position value of the movie clip.
var i;
i = 1+_root._xmouse/5;
Ok, it is not one line (or section) of code, but I digress
from my original writings a bit. In the first line I declare
the variable i in Flash. Of
course, I do not have to declare the variable
i before using it, but I
just thought you would like to know how variables are
declared.
In the second line, I am assigning the
variable i the value of one
added on to the X position of the mouse (_xmouse)
divided by five. Why would I add one to the statement? After
all, does "one" actually make a difference when we are
dealing with numbers that go into the hundreds and
thousands?
I add a 1 to the final result of the xmouse
divided by 5 because I do not want the answer to ever be
zero. The variable i is
going to eventually become the value for the speed. If the
speed happens to become zero, the circles would simply stop
moving - which I do not want! The minimum speed of the
circles will always be 1, and I started the co-ordinate
plain at the x and y location: 0, 0. So _xmouse will never
have a negative value.
if (this,
hitTest(_root.block))
{
this._x
= -1000;
} else {
this._x = location+i++;
}
Let's take a look at the dark colored
portions of code first. The first line introduces the
if
statement. I am basically telling Flash, "If the movie clip
(this) hits the block (the rectangle on the right) do what
is contained above the else statement; if not, do what is
contained under the else statement". That is basically it!
You can learn more about if/else statements by clicking
here.
The blue and green portions of code are the receivers
of the if statement. If the the condition set forth by the
if statement is true, the first blue colored statement
executes. I am telling Flash to take the current movie
clip's x value and subtract 1000 from it. You may remember
in the Customizing section of this tutorial, I told you to
edit the value of -1000 depending on your movie's width. Now
you know when that happens - when the circles come into
contact (hit) the rectangular block.
If the condition (hitting the block) is not
met, the second blue colored line of code will execute. I am
telling Flash to make the current X position of the movie to
equal the current value (location) plus the value of
i (the speed). This is
called an "incrementer" because it increments the value of
this._x.
Throughout the movie, the green portion of
code will be likely to be executed the most. Why? Throughout
the movie the circles will not be in contact with the
rectangular "block". Only when the circles come into contact
with the "block" does the if
condition become true, and the code in blue executes.
this._xscale = 40+_root._ymouse;
this._yscale = 40+_root._ymouse;
The above two lines scale the movie
according the vertical position of the mouse pointer
(_ymouse). To make the scaling uniform in both the x and y
directions, I use the same code for both _xscale and
_yscale. Because I did not want the size of the movie clips
to fall to go beyond a certain minimum, I add 40 to the
final result; regardless of where the mouse pointer is, the
scaling will be greater than 40. Of course, I used a
standard geometric plane that has its origins at 0, 0.
Therefore a negative value for _ymouse is not possible.
|
Factoid: |
In the code
above, you will notice that I preceded anything
having to do with the mouse pointer (_ymouse,
_xmouse)
with
_root. Why would I do that?
The reason is simple; Flash does
everything relative to where the object
containing the code is. _root tells Flash to
start from the main timeline. If I did not
specify _root, Flash would, relatively speaking,
generate the mouse values in relation to the
movie clip the code is on. Because the movie
clips were randomly placed in various locations,
the origin of the x and y values will not be a
the standard 0, 0. To complicate matters, the
movie clips are moving from left to right.
Therefore, the mouse values will also change
automatically with relation to the movie clips'
movement.
Because I am going to the main
timeline where the stage begins at 0, 0, the
mouse values will never go below 0, 0 and into
the negatives. Also, the stage is not going to
move like a movie clip! Therefore, if I did not
use _root, for some movie clips, even the
slightest deviation of the mouse pointer might
force the code to start working on the negatives
and creating a host of problems in positioning
and size.
A great many issues are solved
by simply adding _root! Can you imagine
subtracting 1000 from an already negative
number? I always use _root when referring to the
mouse pointer or something related to an
absolute value for a relatively changing object.
Now, are you not glad you learned that? |
|
|
Conclusion
I hope the tutorial helped you to learn
how to create continuous movement. More importantly, I hope
you understand why the code works so you can create cooler
effects and share it with others someday. This effect is
really my favorite and the animation you saw in the previous
page was only 856 bytes in size including the
GIF image.
For a nice, compact effect, nothing really
comes close to dethroning the magnetism of the continuously
moving circle (or whatever you decide to use). One can spend
a good deal of time simply moving the mouse pointer around
the animation and watching the circles appear, disappear,
grow, shrink, etc. If you are interested in the source code,
click the Previous Page link and download both the MX and
Flash 5 versions.
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
|